<template>
    <div class="table" v-loading.body="loading">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-menu"></i>考试区域分类</el-breadcrumb-item>
<!--                 <el-breadcrumb-item>基础表格</el-breadcrumb-item> -->
            </el-breadcrumb>
        </div>
        <div class="handle-box">
            <el-button type="success" icon="plus" class="handle-del mr10" @click="create">添加节点</el-button>
            <el-button type="warning" icon="setting" class="handle-del mr10" @click="regenerate">重置</el-button>
<!--             <el-select v-model="select_cate" placeholder="筛选省份" class="handle-select mr10">
                <el-option key="1" label="广东省" value="广东省"></el-option>
                <el-option key="2" label="湖南省" value="湖南省"></el-option>
            </el-select> -->
          <!--   <el-input v-model="select_word" placeholder="筛选关键词" class="handle-input mr10"></el-input> -->
<!--             <el-button type="primary" icon="search" @click="search">搜索</el-button> -->
        </div>
        <el-table :data="list" border style="width: 100%" ref="multipleTable" @selection-change="handleSelectionChange" >
<!--             <el-table-column type="selection" width="55"></el-table-column> -->
            <el-table-column prop="title" label="标题" width="280">
                <template scope="scope">
                    {{scope.row.prefix}} {{scope.row.title}}
                </template>
            </el-table-column>
            <el-table-column prop="code" label="编码">
                <template scope="scope">
                    <el-tag type="primary" v-show="scope.row.code != ''">{{scope.row.code}}</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="左右值">
                <template scope="scope">
                    <el-tag type="gray">{{scope.row.lft}},{{scope.row.rgt}}</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="排序" width="100">
                <template scope="scope">
                    {{scope.row.ordering}}
                </template>
            </el-table-column>
            <el-table-column label="操作" width="260">
                <template scope="scope">
                    <el-button size="small" @click="edit(scope.$index, scope.row)">编辑</el-button>
                    <el-button size="small" type="danger" @click="del(scope.$index, scope.row)">删除</el-button>
                    <!--<el-button v-if="scope.row.level == 3" type="success" icon="setting" size="small" @click="setPoint(scope.row)">考点设置</el-button>-->
                    <el-button v-if="scope.row.level > 1" type="success" icon="setting" size="small" @click="setPoint(scope.row)">考点设置</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="pagination">
            <el-pagination
                    @current-change ="handleCurrentChange"
                    layout="prev, pager, next"
                    :current-page.sync="pagination.current"
                    :page-size="pagination.size"
                    :total="pagination.total">
            </el-pagination>
        </div>
        <div class="dialog">
            <el-dialog title="基本信息" :visible.sync="isadding">
              <el-form :model="category">
                <el-form-item label="标题" label-width="80px">
                  <el-input v-model="category.title" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="编码" label-width="80px">
                  <el-input v-model="category.code"></el-input>
                </el-form-item>
                <el-form-item label="父节点" label-width="80px" v-show="category.pid > 0">
                  <el-select v-model="category.pid" placeholder="请选择" size="200px"z>
                    <el-option
                      v-for="item in tableData"
                      :key="item.id"
                      :label="item.title"
                      :value="item.id">
                        <span>{{item.prefix}}{{item.title}}</span>
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="排序" label-width="80px">
                  <el-input v-model="category.ordering"></el-input>
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="isadding = false">取 消</el-button>
                <el-button type="primary" @click="save()" v-show="category.id < 1">确 定</el-button>
                <el-button type="success" @click="update()" v-show="category.id > 0">更 新</el-button>
              </div>
            </el-dialog>

            <el-dialog title="考点设置" :visible.sync="issetting">
                <el-form label-position="right" label-width="120px" :model="currentRow">
                    <el-form-item :label="pi.title" v-for="(pi,pk) in pointCategories" :key="pi.id" v-if="pi.level == 3">
                        <el-input v-model="currentRow.point_data[pi.id]" placeholder="填入题目数量"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="issetting = false">取 消</el-button>
                    <el-button type="primary" @click="saveSetting(true)" :disabled="settingSaved">确 定</el-button>
                </div>
            </el-dialog>
        </div>
    </div>
</template>

<script>
    import http from "../../lib/http"
    import tree from "../../lib/tree"
    export default {
        data : function() {
            return {
                //url: './static/vuetable.json',
                isadding : false,
                issetting : false,
                settingSaved : false,
                loading : true,
                currentRow : {point_data : {}},
                tableData: [],
                cur_page: 1,
                multipleSelection: [],
                select_cate: '',
                select_word: '',
                del_list: [],
                is_search: false,
                dataTotal : 0,
                pointCategories : [],
                category : {
                    id : '',
                    title : '',
                    code : '',
                    pid : "1",
                    ordering : 0
                },
                pagination : {
                    current : 1,
                    total : 0,
                    size : 1000000
                }
            }
        },
        created : function(){
            var self = this
            http.alive(this,function(){
                self.getData();
                self.getPointCategories()
            })
        },
        computed: {
            list : function(){
                const self = this;
                for(var i=0,j=this.tableData.length;i<j;i++){
                    if ((this.tableData[i].point_data != null) && (this.tableData[i].point_data != "") ){
                        if(typeof this.tableData[i].point_data == "object") continue;
                        this.tableData[i].point_data = JSON.parse(this.tableData[i].point_data)
                        // console.log(this.tableData[i].point_data["3"])
                    }
                    else{
                        for(var n=0,m=this.pointCategories.length;n<m;n++){
                            if(this.pointCategories[n].level == 3){
                                this.tableData[i].point_data = this.tableData[i].point_data || {}
                                this.tableData[i].point_data[this.pointCategories[n].id] = ""
                            }
                        }
                    }
                }
                //console.log(this.tableData)
                return this.tableData
            }
        },
        methods: {
            setPoint: function(row){
                // this.issetting = true
                // this.currentRow = row
                location.href = '#/pointsetting-'+row.id
            },
            saveSetting : function(){
                // var params = "",p = []
                // for(var i in this.currentRow.point_data){
                //     p[p.length] = i+":"+this.currentRow.point_data[i]
                // }
                // params = p.join(",")
                var self = this
                http.post(this,"test_categories/"+this.currentRow.id+"/setting",{"id":this.currentRow.id,"p":JSON.stringify(this.currentRow.point_data)}).then(function(res){
                    self.issetting = false
                })
            },
            handleCurrentChange : function(val){
                this.cur_page = val;
                this.getData();
            },
            getData : function(){
                var self = this;
                this.loading = true
                http.get(self,"test_categories").then((res) => {
                    var response = res.data
                    if (response.code == "ok") {
                        self.tableData = tree.make(response.data,"pid",0)
                        self.pagination.total = response.total * 1
                        // self.tableData.map(function(v,_){
                        //     if(v.point_data != ""){
                        //         v.point_data = JSON.parse(v.point_data)
                        //     }
                        //     else {

                        //         v.point_data = {}
                        //         for(var i,j=self.pointCategories.length;i<j;i++){

                        //         }
                        //     }
                        // })
                    }
                    self.loading = false
                    
                })
                
                // if(process.env.NODE_ENV === 'development'){
                //     self.url = '/ms/table/list';
                // };
                // self.$axios.post(self.url, {page:self.cur_page}).then((res) => {
                //     self.tableData = res.data.list;
                // })
            },
            getPointCategories : function(){
                var self = this
                http.get(self,"point_categories",{code:"CS_ROOT"}).then((res) => {
                    var response = res.data
                    //console.log(response.data)
                    if (response.code == "ok") {
                        self.pointCategories = tree.make(response.data,"pid",response.data[0].pid)
                    }
                })
            },
            regenerate : function(){
                var self = this
                http.post(this,"test_category/manage/regenerate").then(function(res){
                    var data = res.data
                    if (data.code == "ok") {
                        self.getData()
                        self.$notify.success({
                            title : "成功",
                            message : "重置成功"
                        })
                    }
                    else{
                        self.$notify.error({
                            title : "错误",
                            message : "重置失败"
                        })
                    }
                })
            },
            create : function(){
                this.isadding = true
                this.category = {
                    id : '',
                    title : '',
                    code : '',
                    pid : "1"
                }
            },
            save : function(){
                var self = this

                http.post(this,"test_category",this.category).then((res)=>{
                    self.isadding = false
                    var data = res.data
                    if (data.code == "ok") {
                        self.getData()
                    }
                    else{
                        self.$notify.error({
                            title : "错误",
                            message : data.msg
                        })
                    }
                })
            },
            update : function(){
                var self = this
                http.put(this,"test_category",this.category).then((res) => {
                    self.isadding = false
                    var data = res.data
                    if (data.code == "ok") {
                        self.getData()
                        self.$notify.success({
                            title : "成功",
                            message : "更新成功"
                        })
                    }
                    else{
                        self.$notify.error({
                            title : "错误",
                            message : data.msg
                        })
                    }
                })
            },
            formatter : function(row, column) {
                return row.address;
            },
            filterTag : function(value, row) {
                return row.tag === value;
            },
            edit : function(index, category) {
                this.isadding = true
                this.category.id = category.id
                this.category.pid = category.pid
                this.category.title = category.title
                this.category.code = category.code
                this.category.ordering = category.ordering
                //this.$message('编辑第'+(index+1)+'行');
            },
            del : function(index, row) {
                //this.$message.error('删除第'+(index+1)+'行');
                var self = this
                this.$confirm('此操作将删除节点以及子节点,是否继续?', '提示', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'warning'
                }).then(() => {
                    if (row.pid == 0) {
                        self.$notify.error({
                          title: '错误',
                          message: '根节点不允许删除'
                        });
                    }
                    else{
                        http.delete(this,"test_category/"+row.id).then(function(res){
                            self.getData()
                        })
                    }
                }).catch(() => {

                });
            },
            handleSelectionChange : function(val) {
                this.multipleSelection = val;
            }
        }
    }
</script>

<style scoped>
.handle-box{
    margin-bottom: 20px;
}
.handle-select{
    width: 120px;
}
.handle-input{
    width: 300px;
    display: inline-block;
}
</style>